<template>
	<map :style="mapStyle" show-location="true" :latitude="latitude" id="map" :longitude="longitude" :markers="markers">
		<cover-view slot="callout">
			<block v-for="(item,index) in markers" :key="index">
				<cover-view class="customCallout" :marker-id="item.id">
					<cover-view class="content">
						在
					</cover-view>
				</cover-view>
			</block>
		</cover-view>
	</map>
</template>

<script>
	export default {
		data() {
			return {
				map: '',
				latitude: 39.890, // 地图默认显示的维度
				longitude: 116.39752, // 地图默认显示的纬度

				markers: [{ // 标记点
					id: 1,
					latitude: 39.890,
					longitude: 116.39752,
					title: "点击提示1",
					joinCluster: true,
				}, {
					id: 2,
					latitude: 39.891,
					longitude: 116.39752,
					title: "点击提示2",
					joinCluster: true,
					customCallout: {
						anchorY: 0, // Y轴偏移量
						anchorX: 0, // X轴偏移量
						display: "BYCLICK" // 一直展示
					},
				}, {
					id: 3,
					latitude: 39.892,
					longitude: 116.39752,
					title: "点击提示3",
					joinCluster: true,
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: "BYCLICK"
					},
				}, {
					id: 4,
					latitude: 39.893,
					longitude: 116.39752,
					title: "点击提示4",
					joinCluster: false,
				}, ],
			}
		},
		onLoad() {

		},
		onReady() {},
		methods: {
			//获取经纬度
			getLication: function() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude;
						that.latitude = res.latitude;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			//获取到的充电站展示到地图中
			filterMapMarkers: function() {
				var list = this.changingStationList;
				console.log("充电站list", list)
				var markers = [];
				for (let i = 0; i < list.length; i++) {
					let markersItem = {
						id: i,
						latitude: list[i].location[0],
						longitude: list[i].location[1],
						iconPath: '/static/image/icon/icon-map-location.png',
						width: '35rpx',
						height: '46rpx',
						customCallout: {
							anchorY: 0, // Y轴偏移量
							anchorX: 0, // X轴偏移量
							display: 'ALWAYS', // 一直展示

						},
					}
					markers.push(markersItem);
				}
				this.markers = markers;
			},
		}
	}
</script>

<style>
	map {
		width: 698rpx;
		height: calc(100vh - 226rpx);
		display: block;
		box-sizing: border-box;
		left: 27rpx;
		top: 0rpx;
		position: relative;
		border: 20rpx solid blanchedalmond;
		border-radius: 20px;
	}

	.customCallout {
		box-sizing: border-box;
		background-color: #fff;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
		border-radius: 4rpx;
		display: inline-flex;
		padding: 6rpx 24rpx;
		justify-content: center;
		align-items: center;
		color: #2A7BE2;
	}
</style>
